<template>
    <div>
        <h2>留言</h2>
        <div v-if="!flag" style="margin-top: 20px">没有数据</div>
        <div class="messagebox" v-if="flag">
            <table>
                <tr>
                    <th>订单编号</th>
                    <th>用户id</th>
                    <th>菜品信息</th>
                    <th>留言</th>
                </tr>
                <tr v-for="(item,index) in tableData" :key="index">
                    <td style="padding: 10px 20px;">{{item.info_id}}</td>
                    <td style="padding: 10px 20px;">{{item.user_id}}</td>
                    <td class="td">
                        <div v-for="(a,b) in item.foodAll" :key="b" style="display: flex;justify-content: space-around;align-items: center;padding: 10px 20px;">
                            <div>{{a.name}}</div>
                        </div>
                    </td>
                    <td style="padding: 10px 20px;">{{item.message}}</td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
    import {getmessage} from '../api/api'
    export default {
        name: "message",
        data(){
            return{
                flag: false,
                tableData:[]
            }
        },
        methods:{

        },
        created() {
            getmessage().then(res=>{
                console.log(res)
              if(res.status == 0){
                  if(res.data.length != 0){
                      this.flag = true
                      res.data.forEach(value=>{
                          value.foodAll = [];
                          value.foodAll = JSON.parse(value.food_all);
                          this.tableData.push(value);
                      })
                  }
              }
            })
        }
    }
</script>

<style scoped>
    .messagebox {
        height: 750px;
        overflow: auto;
    }
    table {
        margin-top: 20px;
        text-align: center;
        border: 1px solid skyblue;
        border-collapse:collapse;
        color: #606266;
    }
    table td{
        border: 1px solid #EBEEF5;
        align-items: center;

    }
    table th{
        border: 1px solid #EBEEF5;
        padding: 10px 20px;

    }
</style>
